import {Divider, notification, Select, Button, Tooltip} from 'antd';
import React, {Component} from 'react';
import 'antd/dist/antd.css';
import './css/UserInfo.css'

const {Option} = Select;

const userinfo = {
    nickName: 'test',
    loginName: 'test',
    telephone: '12345678910',
    status: '在职',
    address: '四川成都',
    department: '部门1'
};

export default class UserInfo extends Component {
    state = {
        isComplete: true,
        isNicknameComplete: true,
        isLoginNameComplete: true,
        isPhoneComplete: true,
    };

    handleSubmitClick = () => {

    };

    handleChangePasswordClick = () => {

    };

    handleTextChange = () => {
        userinfo.nickName = this.refs.nick.value;
        userinfo.loginName = this.refs.login.value;
        userinfo.telephone = this.refs.phone.value;

        if (userinfo.nickName === null || userinfo.nickName === ''
            || userinfo.loginName === null || userinfo.loginName === ''
            || userinfo.telephone === null || userinfo.telephone === '') {
            this.setState({isComplete: false})
        } else {
            this.setState({isComplete: true});
        }

        if (userinfo.nickName === null || userinfo.nickName === '') {
            this.setState({isNicknameComplete: false});
        } else {
            this.setState({isNicknameComplete: true});
        }

        if (userinfo.loginName === null || userinfo.loginName === '') {
            this.setState({isLoginNameComplete: false})
        } else {
            this.setState({isLoginNameComplete: true})
        }

        if (userinfo.telephone === null || userinfo.telephone === '') {
            this.setState({isPhoneComplete: false})
        } else {
            this.setState({isPhoneComplete: true})
        }
    };

    onFocusChange = () => {
        if (!(userinfo.telephone.match(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/))) {
            notification.open({
                message: '电话号码格式错误',
                description: '请输入正确的电话号码',
            });
        }
    };

    handleStatusChange = (value) => {
        userinfo.status = {value};
    };

    handleAddressChange = (value) => {
        userinfo.address = {value};
    };

    handleDepartmentChange = (value) => {
        userinfo.department = {value};
    };

    render() {
        console.log(userinfo);

        let editUserButton;

        if (this.state.isComplete) {
            editUserButton = (<Button type="primary" style={{marginLeft: "45%", marginTop: 32, display: "inline-block"}}
                                      onClick={this.handleSubmitClick}>修改资料</Button>);
        } else {
            editUserButton = (<Button type="primary" style={{marginLeft: "45%", marginTop: 32, display: "inline-block"}}
                                      disabled>修改资料</Button>);
        }

        return (
            <div>
                <div>
                    <div className="userinfo-left">
                        <img className="userinfo-head" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />

                        <Divider/>

                        <div className="userinfo-item">
                            <div style={{
                                marginLeft: 100,
                                display: 'inline-block'
                            }}>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称&nbsp;</div>
                            <Tooltip placement="topLeft" title="用户名不能为空" visible={!this.state.isNicknameComplete}>
                                <input ref="nick" className="userinfo-input" defaultValue={userinfo.nickName}
                                       onChange={this.handleTextChange}
                                       style={{marginLeft: 32, display: 'inline-block'}}/>
                            </Tooltip>
                        </div>
                        <div className="userinfo-item">
                            <div style={{marginLeft: 100, display: 'inline-block'}}>登&nbsp;&nbsp;陆&nbsp;&nbsp;名</div>
                            <Tooltip placement="topLeft" title="登录名不能为空" visible={!this.state.isLoginNameComplete}>
                                <input ref="login" className="userinfo-input" defaultValue={userinfo.loginName}
                                       onChange={this.handleTextChange}
                                       style={{marginLeft: 32, display: 'inline-block'}}/>
                            </Tooltip>
                        </div>
                        <div className="userinfo-item">
                            <div style={{marginLeft: 100, display: 'inline-block'}}>联系电话</div>
                            <Tooltip placement="topLeft" title="电话号码不能为空" visible={!this.state.isPhoneComplete}>
                                <input ref="phone" className="userinfo-input" defaultValue={userinfo.telephone}
                                       onChange={this.handleTextChange}
                                       onBlur={this.onFocusChange}
                                       style={{marginLeft: 32, display: 'inline-block'}}/>
                            </Tooltip>
                        </div>
                        <div className="userinfo-item">
                            <div style={{marginLeft: 100, display: 'inline-block'}}>当前状态</div>
                            <Select
                                ref="status"
                                className="userinfo-select"
                                defaultValue={userinfo.status}
                                style={{
                                    marginLeft: 32,
                                    display: 'inline-block',
                                    border: null
                                }}
                                onChange={this.handleStatusChange}
                            >
                                <Option value="在职">在职</Option>
                                <Option value="退休">退休</Option>
                                <Option value="待岗">待岗</Option>
                            </Select>
                        </div>
                        <div className="userinfo-item">
                            <div style={{marginLeft: 100, display: 'inline-block'}}>所属地区</div>
                            <Select
                                ref="address"
                                className="userinfo-select"
                                defaultValue={userinfo.address}
                                style={{
                                    marginLeft: 32,
                                    display: 'inline-block',
                                }}
                                onChange={this.handleAddressChange}
                            >
                                <Option value="四川成都">四川成都</Option>
                                <Option value="四川绵阳">四川绵阳</Option>
                                <Option value="四川德阳">四川德阳</Option>
                            </Select>
                        </div>
                        <div className="userinfo-item">
                            <div style={{marginLeft: 100, display: 'inline-block'}}>所属部门</div>
                            <Select
                                ref="department"
                                className="userinfo-select"
                                defaultValue={userinfo.department}
                                style={{
                                    marginLeft: 32,
                                    display: 'inline-block',
                                }}
                                onChange={this.handleDepartmentChange}
                            >
                                <Option value="部门1">部门1</Option>
                                <Option value="部门2">部门2</Option>
                                <Option value="部门3">部门3</Option>
                            </Select>
                        </div>

                        {editUserButton}

                        <Button type="primary" style={{marginLeft: 32, marginTop: 32, display: "inline-block"}}
                                onClick={this.handleChangePasswordClick}>修改密码</Button>

                    </div>
                </div>

                <div className="userinfo-right">

                </div>
            </div>
        );
    }
}
